<!--
/**
* Author: txj
* Date: 2023年7月20日11:22:46
* Desc: 订单页影城头
*/
-->
<template>
  <view class="shop-detail">
    <!-- 影票订单 -->
    <view class="flex" v-if="orderType === 'film'">
      <view class="address">
        <view class="name">{{ obj.cinemaInfo.cinemaName }}</view>
        <view>{{ obj.cinemaInfo.address }}</view>
      </view>
      <view class="phone flex" @click="call">
        <zm-image
          src="/phone.png"
          is-join
          custom-style="width:50rpx;height:50rpx"
        ></zm-image>
        <view class="mt10">电话</view>
      </view>
    </view>
    <!-- 套票订单 -->
    <view class="flex" v-if="orderType === 'mall'">
      <view class="address">
        <view v-if="shopList.length === 1">
          <view class="name">{{ shopList[0].businessName }}</view>
          <view>{{ shopList[0].address[0] }}</view>
        </view>
        <view v-if="shopList.length > 1">
          <view class="name">{{ shopList.length }}家门店可用 </view>
          <view class="fc-blue" @click="showAddress"> 查看可用门店</view>
        </view>
      </view>
      <view v-if="shopList.length === 1" class="phone flex" @click="call">
        <zm-image
          src="/phone.png"
          is-join
          custom-style="width:50rpx;height:50rpx"
        ></zm-image>
        <view class="mt10">电话</view>
      </view>
    </view>
    <address-list
      :business-name="obj.businessName"
      :address-list="shopList"
      v-if="addressShow"
      v-model="addressShow"
    ></address-list>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  import { callTelephone } from '@/utils/tools'
  import AddressList from '@/pagesOrder/components/CouponDetail/addressList.vue'
  export default {
    props: {
      customClass: {
        type: String
      },
      orderType: {
        type: String
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    components: {
      ZmImage,
      AddressList
    },
    data() {
      console.log('obj', this.obj)
      return {
        addressShow: false
      }
    },
    methods: {
      showAddress() {
        this.addressShow = true
      },
      call() {
        if (this.orderType === 'film') {
          callTelephone(this.obj.serviceTel)
        } else {
          callTelephone(this.shopList[0].serviceMobile)
        }
      },
      callphone(p) {
        callTelephone(p)
      }
    },
    computed: {
      info() {
        return this.obj
      },
      shopList() {
        console.log('shopList', this.obj.businessDetail)
        return this.obj.businessDetail
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shop-detail {
    padding: 30rpx;
    background: #fff;
    box-sizing: border-box;
    .address {
      width: 80%;
      .name {
        font-weight: bold;
        font-size: 32upx;
        margin-bottom: 20upx;
      }
      .stree {
        font-size: 26upx;
        color: #888888;
      }
    }
    .phone {
      margin-left: auto;
      flex-direction: column;
      align-items: center;
      color: #888888;
      font-size: 26upx;
    }
    &__pop {
      padding: 50upx 30upx 45upx;
    }
    // &__close {
    //   z-index: 9999999999;
    //   position: absolute;
    //   top: 0px;
    //   width: 50upx;
    //   height: 50upx;
    //   background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/close.png)
    //     no-repeat;
    //   background-size: 100%;
    // }
  }
</style>
